<script setup>
import { AlgorithmData } from './data/AlgorithmData.js'
import DynamicForm from './DynamicForm.vue'
import ModelEvaluation from './ModelEvaluation.vue'

import {
	Edit,
	Delete,
	Plus,
	ArrowLeft,
	ArrowRight,
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { nextTick, ref, watch, onMounted, computed, reactive } from 'vue'

const props = defineProps({
	modelValue: {
		type: Object,
		default: () => ({}),
	},
	node: {
		type: String,
		default: '',
	},
})

const emit = defineEmits(['update:modelValue'])

const hasPhase = computed(() => {
	return (
		props.modelValue.targetFeatureTable?.some(
			(item) => item.name === 'phase'
		) || false
	)
})

const algorithmData = AlgorithmData.filter((item) =>
	hasPhase.value ? item.label === '分类' : item.label === '回归'
)

// 生成唯一名称（简化版）
// 例如：如果有多个"逻辑分类"，会变成"逻辑分类"、"逻辑分类 - 1"、"逻辑分类 - 2"等
const generateUniqueNames = (newItems, nameField = 'label') => {
	const nameCount = new Map()

	// 统计现有数据中的名称计数
	props.modelValue.state.modelList.forEach((item) => {
		const baseName = item[nameField].split(' - ')[0] // 处理已带序号的情况（如"逻辑分类 - 1"）
		nameCount.set(baseName, (nameCount.get(baseName) || 0) + 1)
	})

	// 处理新数据，同时设置正确的索引
	return newItems.map((item, index) => {
		const baseName = item[nameField].split(' - ')[0] // 忽略新数据中可能已有的序号
		const count = nameCount.get(baseName) || 0
		const uniqueName = count === 0 ? baseName : `${baseName} - ${count}`
		nameCount.set(baseName, count + 1)
		return {
			...item,
			[nameField]: uniqueName,
			index: props.modelValue.state.modelList.length + index, // 设置正确的索引
		}
	})
}

// 同步新增模型到 modelTabs
const syncModelToTabs = (model) => {
	// 检查是否已存在相同 label 的标签页
	const existingTabIndex = props.modelValue.state.modelTabs.findIndex(
		(tab) => tab.label === model.label
	)

	if (existingTabIndex === -1) {
		// 如果不存在，创建新的标签页，使用模型的索引
		const newTab = {
			label: model.label,
			type: model.type,
			activeName: model.activeName,
			modelIndex: model.index, // 关联模型索引
			dropdownRefs: 'dropdownRefs' + model.index, // 下拉菜单引用，用于动态表单组件的更新
			activeSubTabIndex: 0, // 二级标签索引号
			formData: {
				fileName: props.modelValue.fileName, // 文件名
				targetFeatureTable: props.modelValue.targetFeatureTable, // 目标特征表
				algorithm: model.activeName, // 算法名称
				algorithmName: model.label, // 算法名称
				bestParams: {}, // 最佳参数
				algorithmData: model.fieldList,
				type: model.type, // 算法类型
			}, // 摘要表单
			children: [
				{
					label: '摘要',
					component: 'DynamicForm', // 对应子标签的数组
					refs: 'formRefs' + model.index, // 摘要表单引用，用于动态表单组件的更新
				},
			],
		}

		// 直接添加到数组末尾，避免索引冲突
		props.modelValue.state.modelTabs.push(newTab)

		// 设置为当前激活的标签页
		props.modelValue.state.activeTabIndex =
			props.modelValue.state.modelTabs.length - 1
	} else {
		// 如果已存在，直接跳转到对应的标签页
		props.modelValue.state.activeTabIndex = existingTabIndex
	}
}

const buttonFunctions = {
	// 测试参数
	test: () => {
		console.log(props.modelValue, hasPhase, algorithmData)
	},
	// 快速训练 - 添加所有分类和回归算法
	quickTrainAll: () => {
		// 使用 flatMap 简化数据收集
		const tempList = algorithmData.flatMap((category) =>
			category.children.map((algorithm, index) => ({
				label: algorithm.label,
				type: category.label,
				index: index,
				activeName: algorithm.enLabel,
				fieldList: algorithm.children, // 必填字段
			}))
		)

		// 生成唯一名称的模型列表
		const newModels = generateUniqueNames(tempList)
		props.modelValue.state.modelList.push(...newModels)

		// 同步新增的模型到 modelTabs
		newModels.forEach(syncModelToTabs)
	},

	// 单点算法模型
	addModelToList: (item, type) => {
		const newModel = {
			label: item.label,
			activeName: item.enLabel,
			type: type,
			index: props.modelValue.state.modelList.length,
			fieldList: item.children, // 必填字段
		}

		// 生成唯一名称
		const uniqueModels = generateUniqueNames([newModel])
		props.modelValue.state.modelList.push(...uniqueModels)

		// 同步新增的模型到 modelTabs
		uniqueModels.forEach(syncModelToTabs)
	},

	// 单点模型列表选择
	selectModel: (item) => {
		// 检查是否已存在相同 label 的标签页
		const existingTabIndex = props.modelValue.state.modelTabs.findIndex(
			(tab) => tab.label === item.label
		)
		if (existingTabIndex !== -1) {
			// 如果已存在，直接跳转到对应的标签页
			props.modelValue.state.activeTabIndex = existingTabIndex
		} else {
			// 如果不存在，创建新的标签页并跳转
			syncModelToTabs(item)
		}
	},

	// 单点模型列表删除
	deleteModel: (index) => {
		const deletedModel = props.modelValue.state.modelList[index]
		// 删除模型列表中的项目
		props.modelValue.state.modelList.splice(index, 1)

		// 重新设置剩余模型的索引
		props.modelValue.state.modelList.forEach((model, i) => {
			model.index = i
		})

		// 检查 modelTabs 中是否存在对应的标签页
		const tabIndex = props.modelValue.state.modelTabs.findIndex(
			(tab) => tab.label === deletedModel.label
		)

		if (tabIndex !== -1) {
			// 如果存在对应的标签页，同步删除
			props.modelValue.state.modelTabs.splice(tabIndex, 1)
			// 如果删除的是当前激活的标签页，需要重新设置激活标签页
			if (props.modelValue.state.activeTabIndex === tabIndex) {
				// 如果还有其他标签页，激活第一个；否则清空激活状态
				props.modelValue.state.activeTabIndex =
					props.modelValue.state.modelTabs.length > 0 ? 0 : -1
			}
		}

		// 如果模型列表为空，清空所有标签页和激活状态
		if (props.modelValue.state.modelList.length === 0) {
			props.modelValue.state.modelTabs = []
			props.modelValue.state.activeTabIndex = -1
		}
	},

	// 单点删除tabs页
	deleteTabs: (index) => {
		// 只删除 modelTabs 中的标签页，不影响模型列表
		if (index >= 0 && index < props.modelValue.state.modelTabs.length) {
			const tabs = props.modelValue.state.modelTabs
			const activeIndex = props.modelValue.state.activeTabIndex

			// 保存删除前的标签页数量
			const oldLength = tabs.length

			// 删除指定索引的标签页
			tabs.splice(index, 1)

			// 处理激活标签页的逻辑
			if (oldLength === 1) {
				// 如果删除的是最后一个标签页
				props.modelValue.state.activeTabIndex = -1
			} else if (activeIndex === index) {
				// 如果删除的是当前激活的标签页
				if (index === oldLength - 1) {
					// 删除的是最后一个标签页（但不是唯一的标签页）
					props.modelValue.state.activeTabIndex = index - 1
				} else {
					// 删除的是中间的标签页
					props.modelValue.state.activeTabIndex = index
				}
			} else if (activeIndex > index) {
				// 如果删除的标签页在当前激活标签页之前
				props.modelValue.state.activeTabIndex = activeIndex - 1
			}
			// 其他情况（删除非激活标签且在当前激活标签之前）不需要调整
		}
	},

	// 处理下拉菜单显示状态
	handleDropdownVisible: (visible, refs) => {
		if (visible) {
			// 关闭所有其他下拉菜单
			Object.keys(props.modelValue.dropdownRefs).forEach((key) => {
				if (key !== refs && props.modelValue.dropdownRefs[key]) {
					// 使用handleClose方法关闭下拉菜单
					props.modelValue.dropdownRefs[key].handleClose()
				}
			})
			// 使用setTimeout确保其他菜单关闭后再打开当前菜单
			setTimeout(() => {
				if (props.modelValue.dropdownRefs[refs]) {
					props.modelValue.dropdownRefs[refs].handleOpen()
				}
			}, 0)
		}
	},
	// 删除所有
	deleteAllTabs: () => {
		// 清空所有tabs
		props.modelValue.state.modelTabs = []
		props.modelValue.state.activeTabIndex = -1
		// 清空所有dropdownRefs
		props.modelValue.dropdownRefs = {}
		// 清空所有formRefs
		props.modelValue.formRefs = {}
	},
	// 删除左边
	deleteLeftTabs: (index) => {
		// 删除左边所有模型（不包括当前index）
		const tabsToDelete = props.modelValue.state.modelTabs.slice(0, index)
		const refsToDelete = tabsToDelete.map((tab) => tab.dropdownRefs)

		// 删除对应的dropdownRefs
		refsToDelete.forEach((refKey) => {
			if (props.modelValue.dropdownRefs[refKey]) {
				delete props.modelValue.dropdownRefs[refKey]
			}
		})

		// 删除左边的tabs
		props.modelValue.state.modelTabs.splice(0, index)

		// 调整activeTabIndex
		if (props.modelValue.state.activeTabIndex >= index) {
			props.modelValue.state.activeTabIndex = Math.max(
				0,
				props.modelValue.state.activeTabIndex - index
			)
		} else {
			props.modelValue.state.activeTabIndex = Math.max(
				0,
				props.modelValue.state.activeTabIndex
			)
		}

		// 如果没有tabs了，重置activeTabIndex
		if (props.modelValue.state.modelTabs.length === 0) {
			props.modelValue.state.activeTabIndex = -1
		}
	},
	// 删除右边
	deleteRightTabs: (index) => {
		// 删除右边所有模型（不包括当前index）
		const tabsToDelete = props.modelValue.state.modelTabs.slice(index + 1)
		const refsToDelete = tabsToDelete.map((tab) => tab.dropdownRefs)

		// 删除对应的dropdownRefs
		refsToDelete.forEach((refKey) => {
			if (props.modelValue.dropdownRefs[refKey]) {
				delete props.modelValue.dropdownRefs[refKey]
			}
		})

		// 删除右边的tabs
		props.modelValue.state.modelTabs.splice(index + 1)

		// 调整activeTabIndex
		if (props.modelValue.state.activeTabIndex > index) {
			props.modelValue.state.activeTabIndex = index
		}

		// 如果没有tabs了，重置activeTabIndex
		if (props.modelValue.state.modelTabs.length === 0) {
			props.modelValue.state.activeTabIndex = -1
		}
	},
	// 响应
	addResponse: async (label) => {
		const newItem =
			props.modelValue.state.modelTabs[props.modelValue.state.activeTabIndex]

		const summaryChild = newItem.children.find(
			(child) => child.label === '摘要'
		)
		const refs = summaryChild?.refs

		if (refs && props.modelValue.formRefs[refs]) {
			const valid = await props.modelValue.formRefs[refs].verification()
			if (valid) {
				// 检查是否已存在 "响应" 标签
				const existingResponseIndex = newItem.children.findIndex(
					(child) => child.label === label
				)

				console.log(existingResponseIndex, 'existingResponseIndex')

				if (existingResponseIndex === -1) {
					// 不存在，新增一个
					newItem.children.push({
						label: label,
						component: 'ModelEvaluation',
						refs: `modelEvaluationRefs_${label}` + newItem.modelIndex,
					})
					newItem.activeSubTabIndex = newItem.children.length - 1

					console.log(newItem, 'newItem')
				} else {
					// 已存在，直接切换到该标签
					newItem.activeSubTabIndex = existingResponseIndex
				}

				nextTick(() => {
					props.modelValue.modelEvaluationRefs[
						`modelEvaluationRefs_${label}` + newItem.modelIndex
					].reEvaluate()
				})
			} else {
				ElMessage.error('请先填写摘要信息')
			}
		} else {
			ElMessage.error('未找到摘要表单')
		}
	},
}
</script>

<template>
	<div class="ModelingSubject">
		<div class="ModelingSubject-tool">
			<div class="button-container tool">
				<span class="button">
					<el-button @click="buttonFunctions.quickTrainAll"
						>全部(快速训练)</el-button
					>

					<el-button @click="buttonFunctions.test" v-if="false">测试</el-button>

					<el-popover
						class="box-item"
						title="模型算法"
						placement="bottom"
						width="300"
					>
						<template #default>
							<el-collapse v-model="props.modelValue.state.activeNames">
								<el-collapse-item
									v-for="(item, index) in algorithmData"
									:key="index"
									class=""
									:title="item.label"
									:name="item.label"
								>
									<div
										v-for="(items, index) in item.children"
										:key="index"
										@click="buttonFunctions.addModelToList(items, item.label)"
										class="item-button"
									>
										<span> {{ items.label }}</span> -
										<span> {{ items.enLabel }}</span>
									</div>
								</el-collapse-item>
							</el-collapse>
						</template>
						<template #reference> <el-button>全部</el-button></template>
					</el-popover>
				</span>
				<el-button class="button" :disabled="true">训练所有</el-button>
				<span class="button">
					<el-button
						:disabled="props.modelValue.state.modelTabs.length === 0"
						@click="buttonFunctions.addResponse('响应')"
						>响应</el-button
					>
					<el-button
						:disabled="true || props.modelValue.state.modelTabs.length === 0"
						@click="buttonFunctions.addResponse('实际值 - 预测值(验证)')"
						>实际值 - 预测值(验证)</el-button
					>
					<el-button
						:disabled="props.modelValue.state.modelTabs.length === 0"
						@click="buttonFunctions.addResponse('残差(验证)')"
						>残差(验证)</el-button
					>
					<el-button
						:disabled="props.modelValue.state.modelTabs.length === 0"
						@click="buttonFunctions.addResponse('散点(验证)')"
						>散点(验证)</el-button
					>
					<el-button
						:disabled="props.modelValue.state.modelTabs.length === 0"
						@click="buttonFunctions.addResponse('最小 MSE')"
						>最小 MSE</el-button
					>
				</span>
			</div>
		</div>
		<div class="ModelingSubject-content">
			<div class="ModelingSubject-content-left">
				<div class="ModelingSubject-content-left-header">
					<h3>模型列表</h3>
					<span class="model-count"
						>{{ props.modelValue.state.modelList.length }} 个模型</span
					>
				</div>
				<div class="ModelingSubject-content-left-list">
					<div
						v-for="(item, index) in props.modelValue.state.modelList"
						:key="index"
						class="ModelingSubject-content-left-item"
						:class="{
							active:
								item.index === props.modelValue.state.activeTabIndex &&
								props.modelValue.state.activeTabIndex !== -1,
						}"
						@click="buttonFunctions.selectModel(item)"
					>
						<div class="item-main">
							<div class="item-icon">
								<el-icon v-if="item.type === '分类'">
									<svg viewBox="0 0 1024 1024" width="16" height="16">
										<path
											d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
											fill="currentColor"
										/>
										<path
											d="M512 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z"
											fill="currentColor"
										/>
									</svg>
								</el-icon>
								<el-icon v-else>
									<svg viewBox="0 0 1024 1024" width="16" height="16">
										<path
											d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
											fill="currentColor"
										/>
										<path
											d="M272 728h536c4.4 0 8-3.6 8-8V284c0-7.2-8.7-10.7-13.7-5.7L592 488.6l-125.4-124c-3.1-3.1-8.2-3.1-11.3 0l-189 189.6c-1.5 1.5-2.3 3.5-2.3 5.6V720c0 4.4 3.6 8 8 8z"
											fill="currentColor"
										/>
									</svg>
								</el-icon>
							</div>
							<div class="item-info">
								<div class="item-name">{{ item.label }}</div>
							</div>
						</div>
						<div class="item-actions">
							<el-button
								size="small"
								type="text"
								class="action-btn delete"
								@click="buttonFunctions.deleteModel(index)"
							>
								<el-icon><Delete /></el-icon>
							</el-button>
						</div>
					</div>
					<div
						v-if="props.modelValue.state.modelList.length === 0"
						class="empty-state"
					>
						<el-icon size="48" color="#c0c4cc">
							<Plus />
						</el-icon>
						<p>暂无模型，请从上方选择算法</p>
					</div>
				</div>
			</div>
			<div class="ModelingSubject-content-right">
				<div
					v-if="props.modelValue.state.modelTabs.length === 0"
					class="empty-tabs-state"
				>
					<el-icon size="64" color="#c0c4cc">
						<Plus />
					</el-icon>
					<h3>暂无模型</h3>
					<p>请从左侧选择算法或点击"全部(快速训练)"添加模型</p>
				</div>
				<el-tabs
					v-else
					type="border-card"
					class="ModelingSubject-content-right-tabs demo-tabs"
					v-model="props.modelValue.state.activeTabIndex"
					@tab-remove="buttonFunctions.deleteTabs"
				>
					<el-tab-pane
						v-for="(item, index) of props.modelValue.state.modelTabs"
						:key="index"
						:label="item.label"
						:name="index"
						closable
					>
						<template #label>
							<el-dropdown
								trigger="contextmenu"
								:ref="
									(ref) =>
										(props.modelValue.dropdownRefs[item.dropdownRefs] = ref)
								"
								@visible-change="
									(visible) =>
										buttonFunctions.handleDropdownVisible(
											visible,
											item.dropdownRefs
										)
								"
							>
								<span>{{ item.label }}</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item @click="buttonFunctions.deleteAllTabs">
											<el-icon><Delete /></el-icon>
											<span>删除所有</span>
										</el-dropdown-item>
										<el-dropdown-item
											@click="buttonFunctions.deleteLeftTabs(index)"
										>
											<el-icon><ArrowLeft /></el-icon>
											<span>删除左边</span>
										</el-dropdown-item>
										<el-dropdown-item
											@click="buttonFunctions.deleteRightTabs(index)"
										>
											<el-icon><ArrowRight /></el-icon>
											<span>删除右边</span>
										</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</template>
						<el-tabs
							type="border-card"
							class="ModelingSubject-content-right-tabsItem"
							v-model="item.activeSubTabIndex"
							@tab-remove="(targetName) => deleteSubTab(index, targetName)"
						>
							<el-tab-pane
								:label="items.label"
								v-for="(items, i) of item.children"
								:key="i"
								:name="i"
								:closable="items.deletable"
							>
								<div class="sub-tab-content">
									<!-- 摘要页面 - 动态表单 -->
									<div v-if="items.label === '摘要'">
										<div
											v-if="
												props.modelValue.state.activeTabIndex !== -1 &&
												props.modelValue.state.modelList.length > 0
											"
										>
											<!-- 当前模型信息 -->
											<div class="current-model-info">
												<el-card shadow="never" style="margin-bottom: 20px">
													<div style="color: #606266; font-size: 14px">
														<p>
															<strong>算法名称:</strong>
															{{ item.label }} - {{ item.activeName }}
														</p>
													</div>
												</el-card>
											</div>

											<DynamicForm
												:ref="
													(ref) => (props.modelValue.formRefs[items.refs] = ref)
												"
												v-model="item.formData"
											/>
										</div>
										<div v-else class="no-model-selected">
											<el-empty description="请先选择一个模型">
												<template #image>
													<el-icon size="60"><Plus /></el-icon>
												</template>
											</el-empty>
										</div>
									</div>
									<div v-if="items.label !== '摘要'">
										<div
											v-if="
												props.modelValue.state.activeTabIndex !== -1 &&
												props.modelValue.state.modelTabs[
													props.modelValue.state.activeTabIndex
												]
											"
										>
											<ModelEvaluation
												v-model="item.formData"
												:type="items.label"
												:ref="
													(ref) =>
														(props.modelValue.modelEvaluationRefs[items.refs] =
															ref)
												"
											/>
										</div>
										<div v-else class="no-model-selected">
											<el-empty description="请先选择一个模型">
												<template #image>
													<el-icon size="60"><Plus /></el-icon>
												</template>
											</el-empty>
										</div>
									</div>
									<div v-if="items.key === 'actual-predicted'">
										<p>实际值-预测值页面内容</p>
										<p>这里可以放置实际值-预测值页面的表单或内容</p>
									</div>
									<div v-if="items.key === 'residual'">
										<p>残差页面内容</p>
										<p>这里可以放置残差页面的表单或内容</p>
									</div>
									<div v-if="items.key === 'min-mse'">
										<p>最小MSE页面内容</p>
										<p>这里可以放置最小MSE页面的表单或内容</p>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
@import url('./index.scss');
.ModelingSubject {
	&-tool {
		.tool {
			margin: 10px 0 0;
			border-bottom: 1px solid #e5e5e5;
		}
	}
	&-content {
		min-height: calc(100vh - 266px);

		display: flex;
		&-left {
			width: 300px;
			min-height: 100%;
			border-right: 1px solid #e5e5e5;
			box-sizing: border-box;
			padding: 4px;
			&-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 8px 12px;
				border-bottom: 1px solid #e5e5e5;
				h3 {
					margin: 0;
					font-size: 16px;
					color: #333;
				}
				.model-count {
					font-size: 14px;
					color: #909399;
				}
			}
			&-list {
				overflow-y: auto;
				padding: 8px 12px 8px 0;
				.ModelingSubject-content-left-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 12px;
					margin: 4px 0;
					border-radius: 6px;
					cursor: pointer;
					transition: all 0.3s ease;
					border: 1px solid transparent;
					box-sizing: border-box;
					height: 40px;
					&:hover {
						background-color: #f5f7fa;
						border-color: #e4e7ed;
						transform: translateY(-1px);
						box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
					}

					&.active {
						background-color: #ecf5ff;
						border-color: #409eff;
						box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);

						.item-main {
							display: flex;
							align-items: center;
							.item-icon {
								display: flex;
								align-items: center;
								color: #409eff;
							}
							.item-info {
								.item-name {
									color: #409eff;
								}
							}
						}
					}
					.item-main {
						display: flex;
						align-items: center;
						flex: 1;
						.item-icon {
							margin-right: 10px;
							color: #606266;
						}
						.item-info {
							.item-name {
								font-size: 14px;
								color: #333;
								font-weight: bold;
							}
						}
					}
					.item-actions {
						display: flex;
						align-items: center;
						opacity: 0;
						transition: opacity 0.3s ease;

						.action-btn {
							padding: 4px;
							margin-left: 4px;
							border-radius: 4px;
							color: #909399;
							transition: all 0.3s ease;

							&:hover {
								color: #409eff;
								background-color: #ecf5ff;
							}

							&.delete {
								color: #f56c6c;
								&:hover {
									color: #f56c6c;
									background-color: #fef0f0;
								}
							}
						}
					}

					&:hover .item-actions {
						opacity: 1;
					}
				}
				.empty-state {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 40px 0;
					color: #c0c4cc;
					.el-icon {
						margin-bottom: 10px;
					}
					p {
						font-size: 14px;
						color: #909399;
					}
				}
			}
		}
		&-right {
			width: calc(100% - 300px);

			:deep(.ModelingSubject-content-right-tabs) {
				border: none !important;
				.el-tabs__header {
					.el-tabs__nav-wrap {
						display: flex;
						align-items: center;
						height: 32px;
						.el-tabs__item {
							height: 30px;
							box-sizing: border-box;
						}
						.el-tabs__nav-next,
						.el-tabs__nav-prev {
							height: 32px;
							display: flex;
							align-items: center;
							background-color: #e5e5e5;
							justify-content: center;
						}
					}
				}

				.el-tabs__content {
					margin: 0;
					padding: 0;
					.ModelingSubject-content-right-tabsItem {
						border: none !important;

						.el-tabs__item {
							border-top: 3px solid #e4e7ed;
						}
					}
				}
			}

			.sub-tab-content {
				padding: 20px;
				min-height: 200px;

				p {
					margin: 10px 0;
					color: #606266;
				}

				.no-model-selected {
					display: flex;
					justify-content: center;
					align-items: center;
					min-height: 300px;

					.el-empty {
						--el-empty-padding: 40px 0;
					}
				}
			}

			.empty-tabs-state {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				color: #c0c4cc;

				.el-icon {
					margin-bottom: 16px;
				}

				h3 {
					margin: 0 0 8px 0;
					font-size: 18px;
					color: #909399;
				}

				p {
					margin: 0;
					font-size: 14px;
					color: #c0c4cc;
				}
			}
		}
	}
}

// dropdown样式优化
:deep(.el-dropdown-menu__item) {
	.el-icon {
		margin-right: 8px;
	}
}

.item-button {
	margin: 4px 0;
	padding: 4px;
	cursor: pointer;
	border: 1px solid #ebeef5;
	border-radius: 4px;

	background-color: #ecf5ff;
	color: #409eff !important;
	transition: all 0.3s ease;

	display: flex;
	align-items: center;

	&:hover {
		background-color: #409eff;
		span {
			color: #fff !important;
		}
	}
}
</style>
